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بسم الله الرحمن الرحيم 


دورة متقدمة في ا١1۲‏ 

mubarmej : فلİi‎ 

يشير الإختصار 1۲١1‏ إلى عبارة 29€ Markup Lagu‏ ext٣erمHyp‏ أو لغة الترميز المتشعبة» وهذه اللغة هي اللغفة المستخدمة في تصميم جميع صفحات الويب الإحترافية» فهل تريد أن تصمم 
صفحات ويب احترافية ؟ تعال الآن وشارك الركب. 


+ 


مقدمة 


تكتب ملفات ا1۲۷1 في صورة ملفات نصوص بسيطة ۲٠×(‏ ١أها۴)ء‏ تأخذ الإمتداد ٣٤٣١١.‏ عادة. وتكتب في أي برنامج للنصوص البسيطة» في 
الويندوز استخدم 0ةمعأه.» في اللينكس استخدم ١٥٥٤م»‏ في الماكنتوش استخدم أ×٤‏ عام" أS»‏ جميع هذه البرامج مناسبة حدا لعمل صفحات 
HTML‏ 


الأمر الآخر الذي ستحتاج إليه هو متصفح للإنترنت» ولن کون أكثر من 1te ٣٤٤‏ orerاExp‏ أو Netscape Navigator‏ أو الأثنين معاء وبما أنك الآن 
تتطلع على هذه الصفحة فلا بد من أنك تمتلك المتصفح أيضا» ستحتاج إلى معاينة الصفحات بالمتصفح بعد كتابهاء ولأن المتصفحات تختلف من 
نوع إلى آخر لذا ل أن تقوم بمعاينة صفحتك بجميع المتصفحات الموجودة وتتأكد من أنها تظهر بشكل سليم فق حميع المتصفحات. لأن 
الجمهور الذي سيزور صفحتك سيستخدم المتصفح الذي يفضله هو لذلك فإن عليك التأكد من أن الجمهور يستطيع رؤية الصفحة بمتصفحه أيا 
کان. 


المشكلة التي قد تواجهك فى كتابة صفحاتك هي دعم المتصفحات للغة العربية أولاء ودعمها لآخر التقنیات ثانا يقدم متصفح 1t٣‏ 
Explorer‏ من Microsoft‏ دعما رائعا للغة العربية» ولآخر تقنيات الويب مثل 4.0 11%1 و CSS‏ و Netscape Navigator zفصتم lÎ, «lارuغgو XML‏ 
فهو لا يدعم اللغة العربية بشكل جيد ولتحسين دعم اللغة العربية تحتاج إلى برنامج S1 ٣0530‏ من شركة صخر وفي كل الأحوال يظل متصفح 
Navigator Netscape‏ متصفحا متعبا في التصمیم لھذه الأسباب جمیعا اعتمدنا متصفح 1nt‌e۲ "٤‏ 5.0 erاoاExp‏ کمتصفح قیاسي لصفحات 
موقعنا» فهي تظهر بشکل رائع فيه. 


أخر إصدارة من متصفح N١920‏ عمpهعNets‏ هي الإصدارة 4.72 وأخر إصدارة من برنامح S١3١‏ هي 4.51 وقد توقفت شركة صخر عن 
تريب 3۷10310۲ قى الاونة الاخيرة لأسباب ل أعرةما 


بعد كل هذا .. لفة ۳١۳۷1‏ لغة وصفية سهلة جدا ذات قدرات عالية وميزات فريدة وقوية. جميع الصفحات العالمية متقنة التصميم تم إعدادها 
باستخدام لغة 1۲۷1ء تتميز 1۲M1‏ أيضا بأنها ذات قواعد سهلة ومعروفة» تستطيع أيضا في لغة 11۷1 عمل الشيء نفسه بأكثر من طريقةء 
لذلك ومهما كانت الطريقة التي تفكر بها ستجد أنك تحصل غالبا على ما تريده بالضبط. 


تتکون ملفات اM‏ ۸۲ من قسمین ` 
٠‏ المحتوى : وهو ما يشاهده الجحمهور في صفحتك. 


٠‏ الوسوم :وهي الأجزاء التي تحدد كيف سيشاهد جمهورك المحتوى السابق. فهي تصف المحتوى من حيث التنسيق. 
متال على ذلك هذا السطر من لغة ا11M‏ .. 
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HTML is a <b>Great</b> Language 


عند امتتخدام المتضفح فى مشاه السظر السانق شيظ مر هكا .. 


HTML is a Great Language 


في المثال السابق تبدو أجزاء ملف ال ا1۲M‏ واضحة. المحتوى الذي يتمثل في عبارة ع29 "9u‏ ةا خجعاG‏ ه ك¡ M1‏ والوسوم المحاطة 
بعلامتي < و >» في المثال السابق استخدمنا وسما يدعى 0 وهو اختصار لكلمة ١ا00‏ (عريض)»ء ويأتي في صورة زوج من الوسومء وسم 
للفتح ووسم للإغلاق» ويتميز وسم الإغلاق عن وسم الفتح في أنه يحتوي على علامة ( / ) قبل اسم الوسمء وسم الفتح يعني أن المتصفح 
يجب أن يطبق الوصف الموجود في الوسم على جميع النصوص الذي تلي الوسم وحتى يصل إلى وسم الإغلاق» مثل التشغيل والإطفاء .. 
وسم الفتح يشغل ميزة الخط العريض ووسم الإغلاق يطفأً هذه الميزة» وكما أن هنالك وسما للخط العريض .. هنالك وسم للخط المائل» وآخر 
لتغفيير الخطء ووسوم أخرى للجداول والصور» جميع عناصر ملف 1۳۷1 يتم إدراجها عن طريق الوسوم, وتحدد خصائصها أيضا عن طريق الوسوم. 


إذا أأزدت آمتلا أن تغير الخظ في كلامة ع6۲ في مثالنا السابق» سنحتاج إلى استخدام الوسم »۴۵۸٤‏ حیث سنستخدمٌ الوسم ۴۵۸ بأن نضبط 
خاصية لون الخط في, كلمة ةع6۲ إلى اللون الأحمر ويتم هذا كالتالي .. 


HIML i1S 4 <FOINIL COOLIO: "reEJ" CIEL </TONL> LalGUaIe 
حیث ستبدو هھکذا'.‎ 
HTML is a Great Language 


في المثال السابق يتضح لنا أمر آخر» وهو أنه حتى نضبط خصائص أحد الوسوم فإننا نقوم بوضع إسم الخاصية بعد اسم الوسم بين علامتي 
ال< وال> ونفصل بين اسم الوسم والخاصية بمسافة بيضاءء وتكون الخصائص في صورة إسم="قيمة" أي إسم الخاصية ثم علامة المساواة 
ثم قيمة الخاصية بين أقواس الإقتباس المزدوجة» في المثال السابق قمنا بضبط الخاصية ١010ء‏ للوسم ۴0١‏ عند القيمة ١۲86ء‏ وإذا كان هنالك 
أكثر من خاصية يمكننا إضافتها أيضا في نفس المكان» بحث نفصل كل خاصية والأخرى بمسافةء متلا .. 


HTML is a <font color="red" size="+1">Great</font> Language 
.. التي ستظهر هكذا‎ 
HTML is a Great Language 
.. 1۲١M1 أمور إضافية يجب أن تعرفها عن‎ 


ه٠‏ لغة M1‏ 11 لا تراعي حالة الأحرف من حيث كونها كبيرة أو صغيرةء أي أنه في ا۷٧1۲‏ وضع <ط> لا يختلف عن <8>. 

ه٠‏ يمكن إحاطة قيم الخصائص بعلامة إقتباس مزدوجة ( " ) أو مفردة ( ' )> ويمكن أيضا عدم إحاطتها بأي منها إذا كانت القيمة تتألف من 
كلمة واحدة دون مسافات. 

٠‏ بعض الوسوم تحتاج إلى وسم إغلاق وبعضها لا يحتاج إليه. 
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قد وقد لا يحتوي وسم الفتح على خصائص إضافية» ولكن وسم الإغلاق لا يحتوي أبدا على هذه الخصائص.‎ ٠ه‎ 
لغة ا11M لا تراعي المسافات البيضاء» وتعتبرها جميعا مسافة واحدة» أي أن وضع مسافة واحدة بين كلمتين» يساوي وضع‎ ٠ه‎ 
مسافتين» ويساوي وضع تلاتين مسافة» ويساوي وضع سطر جديد» ويساوي وضع جدولة طها» كلها تترجم إلى مسافة.‎ 
توضع التعليقات بين <!-- و --> أي أن المتصفح يتجاهل أي شيء بينهما وكأنه غير موجود.‎ ٠ه‎ 


ښه ملف ۸7ML‏ 
یتکون ملف ا۳1M‏ القياسي من جزئين رئيسيين هما : 


٠‏ الرأس ل4هه١‏ : يحتوي على المعلومات الإضافية الخاصة بالمستند مثل عنوان الصفحة والكلمات المفتاحية فيها وغيرها من الأمور 
الخاصة بالصفحة والتي لا تعتبر من ضمن المحتوى. 
٠‏ الجسم 804¥ : وهو يحتوي على المحتوى الذي يراه المستخدم. 
المتال التالي يبين كيفية تقسيم ملف ا11M‏ .. 


SEM N 


<head> 


CMe 


BDO 


ON 


TN 


المثال السابق صريح» ولا يحتاج إلى المزيد من التوضيح. الأجزاء التابعة للرأس توضع بين <4ةه!> و </ل3هط>. أما الأجزاء التابعة للجسم 
فتوضع بين الوسمين <500¥[> و </¥كb[0>‏ . 


يتم تحديد عنوان المستند الذي يظهر في شريط العنوان للمتصفح باإاحاطته ب <عاإا> و </ع|ان)>. والمكان الصحيح لوسم ال <عاااا> هو 
الرأسء حيث أن الوسم علا لا يعتبر من ضمن محتوى الصفحة ولا يظهر في الصفحة» وهو يستخدم في عمليات البحث والأرشفة كما فى 


مخركات اللخت. ولا تمك وض وسوم سيق اخرى بين وسمى ال 6اا 


وتوجد أيضا وسوم أخرى تحدد صفات المستند تمسى وسوم اع" توضع أيضا في منطقة الرأس» وسنأتي إليها في أمور إضافية في هذه 
الدورة. 


أما باقي الوسوم فأغلبها يوضع في منطقة الجسم ۷أ0(. 
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الخطوط و الألوان 
الأنماط الأساسية 


أولا العناوين وهي من ستهة مستویات» العنوان الأول hi‏ والثاني h2‏ وهکذا حتی 16 .. 


LMI 
2 
E. 
E 
ehe. 
oS 


<hI-HEading 
T2 NE IAING 
<h3>Heading 
<h4>Heading 
<o Heading 


THe HES IING 
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Heading 1 
Heading 2 
Heading 3 
Heading 4 


Heading 5 


Heading û 


لتحديد الفقرات يتم إحاطتها بالوسم ° 


E a N MC Co 


لتحديد اتجاه الفقرة استخدم الخاصية ١وااة‏ في الوسم ۶° 


<P alii lei Le Alii DilAIEAON 7> 
<p align="center">Centered paragraph</p> 


<p alin rTIiGllL FIDL allglled Galt iGraGN 7D 


Left alized paragraph 


entered paragraph 


Fight algned paragraph 


لعمل وصلة استخدم الوسم ه مع الخاصية ۲٠۴‏ لتحديد الوجهة» الوجهة قد تكون صفحة ا١٣٣‏ وعندها يبدأ العنوان ب ما: وقد يكون عنوان 
موقع ما وعندها يبدأ ب ط؟: وقد يكون بريدا إلكترونيا وعندها يبدأ ب 0ااأة"٣:‏ »ستعرف المزيد عن المسارات عندما يأتي الحديث عن الصور في 
الدرس القادم وبين وسمي الفتح والإغلاق ضع المحتويات الساخنة أو الوصلة نفسهاء وهي قد تكون نصوصا أو صورا. 


CE aE ORNS MOCO OEE COL SOE E O E TT e 


<a Nretf mall O:muUbDaArMmE J CNOLMAII. COS My E mall</a2 
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Ncrosol ofp. 


lyr E-maul 


يوجد أيضا استخدام آخر للوسم ه باستعمال الخاصية ١٣۳٠‏ بدلا من ۸۲6۴ (يمكن استعمال الإثنين معا). وبعد ذلك تستطيع أن تدرج وصلة 
عادية تشير إلى المكان الذي به <ع٥م۳هa,‏ ه="">. وذلك بجعل خاصية ۲۴۴"؟ الوصلة العادية تشير إلى الإسم المحدد في ۸3۳٥۴‏ مسبوقا بعلامة 
#ء مثال ذلك إذا أردت أن تضع وصلة تقودك إلى جزء معين من المستند الحالي» ستقوم بعمل <ع2۳١۷""=ع۳ه"‏ ه"></ج> في المكان 
المطلوب» تم تدرج وصلة في أي مكان آخر كالتالي <ع۳هة"۷"#"=۴٠إط‏ ه">إسمي</ه>.ء ويمكنك أيضا عمل ذلك عبر المستندات (من 
مستند إلى مستند آخ بحيث تحدد بالضبط المكان الذي تريده من المستند lالوجhة href="salem.html#myname> li>‏ w|<"aم“م‏ 
سالم</2>. 


يمكنك أيضا عمل وصلة إلى أعلى المستند بوضع ٥#‏ في الخاصية .۲١۴‏ 
لإجبار النص على الإنتقال إلى السطرالتالي استخدم <۲ا5> . 
لإضافة مسافة اشتخدم ۸5568 : (لقمل أكثر من مسافة واحدة) 


يمكنك استذد ال و ٥٣م‏ لمنع المتصفح من تجاهل المسافات البيضاء ويحتسب الطللفة مسافة وال88 .81 الات مسافات والسطر 
الجديد سطرا جديدا» فقط بين الوسمين <۲> و </0۲€> . 


يمكنك توسیط أي شيء بوضعه بين الوسمين <C€t€]>‏ و9 >CEeNt€r/>‏ 


Font م‎ مwسglلl‎ 


يعمل الوسم ۴0١‏ دائما مع مجموعة من الخصائص» فهو لا يمتلك أي تأثير لوحدهء وأهم خصائصه هي التي تحدد نوع الخط والتي تحدد لونه 


والتي تحدد حجمه. 
أول خصائص الوسم ۴0١‏ هي الخاصية ۴۵٩€‏ التي تحدد نوع الخط المستخدم 


EG O MG GM EL MC E o 


“Toll ECG ToT IET NEV U UIIEL IE ICT EOE 


Yerdana Text 


Lourlisr New Taxt 


بعد ذلك هنالك الخاصية ١0ا0‏ المستخدمة لتحديد لون الخط (أنظر إلى الألوان في الأسفل) 


THI: 1S5 CTRL Colo rEJT REI TONL 


ANd Lh IS <ToNl Colo! blue IUE</IODNLZ 


: MEE برا‎ 
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This is Eed and this 1s Blue 


الخاصية الثالثة هي الخاصية ع7أكء وهي تحدد حجم الخطء توجد سبعة أحجام للخطء والخط الأساسي في الصفحة يأخذ أحد هذه الأحجام 


وإذا أردت أن تفير حجم الخط في كلمة معينة أو جزء ما من النصوص استخدم الوسم ا١۴0‏ مع الخاصية ع2أء لزيادة حجم الخط أو إنقاصه بمقدار 
معين» إذا كا الخط الأساسي هو 3 فإنه يمكنك زيادة الخط 4 مرات حتى تصل إلى 7 وهو أكبر خط ويمكنك إنقاصه مرتين ليصبح 1 وهو أصغر 
حجم للخط الخط الأساسي القياسي هو 3 ما لم تقم بتغييره» يتم تحديد أثر الرقم من حيث الزيادة أو النقصان بإاضافة + قبل الرقم للزيادة و - 
قبل الرقم للنقصان» وعند الزيادة فوق الحجم 7 سيعرض المتصفح النص بالحجم 7 وكذلك عند النقصان إلى أقل من الواحد فسوف يتم إعتباره 
1. 


TONLE GIES iE 7 TON UE 
FOL SiG NT TATE CC TNL UZ 
CEONL SGIilEéE TINS iG STON UZ 
TNL SIE IT ITE dc TON CI 
CTONL GIieE OSS iTeE CTO biz 
EOE CI A OS ly 


IONE SIGN NTIS 1 TON COE 


S1ze 7 
S1ze 6 
S1ze 5 

Size 4 

IEE ےھ‎ 

IZE 2 


ol 1 


توجد أيضا طريقة سريعة لتكبير الخط خطوة واحدة أو تصغيره خطوة واحدة باستخدام الوسم <وأط> و <ااق٣ء>‏ 


Mo oN o o 
SMall Size CC MILL E 


Hig Dii SDI DIG DE 
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الطرفق السافة لفير ألخط تسمى طرقا تنسسة اذاه لاك قوم تير الخظ مالس الفط الأساسىي تمك أبخا تخديذ الحم الزکى‎ 
تريدو خط با لخا دوت الأتمادكلى العة الاساسى قن طبن الحاضة 526 5ا ها ولي دون وضع اساة غ أو مايل الخخم المظلوب‎ 


TONE SiG TNE TONG O 
TOL SIE TTS CGC EEC OES 
CTO SIE EEG TONE OE 
TOL AEG oT DE 
CTO SIG TT AEG TONE UE 
MOC OE Cs 


CE Ts O 


S1ze 7 
S1ze 6 
S1ze 5 

Size 4 

IEE 4ھ‎ 

IZE 


1 سات 


يمكنك كذلك تفغفيير حجم الخطالأساسي في المستند وهذا سيؤثر على اجميع الأماكن التي استخدمت فيها الأحجام النسبية للخطوطء 
ونغير الخط الأساسى باستخدام وسم يدعى <ا١256۴0(>‏ ويمكن استخدامه لتفيير حجم الخط الأساسي في المستند أو لون الخط 
ON RE a <A‏ ل ERIS. Nl ol‏ 
إلى ”لم۷ بحجم 3 ولون أخضر نضع السطر التالي قي المستند 


<DaSsefont Colot "GrIecnN. SIzG TIN" TaACGE Verlaan >‏ 
والوسم السابق لا يستخدم في جزء محدد من نصوص ا١1۳‏ بل يظهر تأثيره في الصفحة كلها لذلك فهو لا يحتاج إلى وسم إغلاق. 


توجد أيضا وسوم أخرى للتنسيقات المختلفة» مثلا الوسم 5 أو 9١٠٣ء‏ للخط العريض والوسم أ¡ أو ٠۳‏ للمائل »و الوسم ا يستخدم لحعل 
الحروق متساوية في الححم مثل نصوص الآلة الكاتبة 


THEIISG DG iT Eoll TET Ml CTI INI Tio COC 
CUE TINI. <7 OC ICING lect aI CEM TIS 7 CM TOI TES 


ANd CTT Z>ThicSt/ T> IESE Tpevwrlltel Text 


Thus ıs Eocld Text and this tol 
but Fie 18 Italic Text and Ais tol 


And This 1s Typewriter Text 


يوجد وسم خاص بوضع الخط الأفقي هو الوسم ۸۲ يمكنك تحديد عرض الخط بالخاصية لاء حيث تأخذ الاس قيما مطلقة مثل 10 أو 293 
وهي تحدد العرض بالبكسل» وقيما نسبية تقاس بالنسبة إلى عرض الصفحة»ء مثل %20 و %85 توجد أيضا خاصية أخرى هي ع7أك تحدد 
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وهي خاصية بدون قيمة» وعند‎ ۸0512٥ ارتفاع الخط رأسيا ويأخذ قيما مطلقة صغيرة» وتوجد أيضا خاصية ١0ا0 لتحديد لون الخط. والخاصية‎ 
وضعها تجعل الخط يبدو مصمتا وليس منحوتا كما في الحالة القياسية‎ 
INNIS iE thE IIirSCE Lie 
ME 
TIhiS 1S the SecoUund Line 
CN: Colo TTULDlIECG 
INLIS 1S the INIT Line 
a OEE 
IMIS: 1é Che EoULTIN LIuile 


ا ا a‏ د 
Thus 1s the First Line‏ 
Thus 1s the SeEcound Line‏ 


Thus 12 the Third Line 


Thus 1s the Fourth Line 


يمك A oo‏ رات e‏ مثل لون خلفية 
الصفحة ١ه0امعوط‏ وصورة الخلفية المتكررة ١١U١۲و)عةط.‏ ولون النص أ×ع) ولون الوصلة الجديدة !ًا والقديمة ١K‏ ااا والمخددة حاليا )alinء‏ 
وحاشية الصفحة العلوية 0۳3۲9١‏ والسفلية .rightmargin ”آiمnaلll, leftmargin éرسیلlو butto mm" 2ar9i1‏ 


<Body alink="red" linNkK>T"yellow" vIINKT"blue" 
DOCOLOE=T"BIlackK" TeExL "while" LOPMaErOInNn TONS 

TIS 16 Some Tel CDE 

And here are some links :<br> 

<a href="http://www.download.com/">Great Downloads</a><br> 
<a Nrel "malllO:DGalLEeESCONOLMaA1I1l.COMTZBIlLl CGCaleSs!l2</322<DrZz 
<4 Nrel NID UT DMD NCO MI CLOSLE MNeEltuoOLK 14 CUE 

<ê Nhrel TNLLD://Wuw hotmail.com zErece E Na11</a> 
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This 18 sotne Text. 
ا1‎ here ate sotme links : 


الالوإان فى ۸7ML‏ 


الألوان في الكمبيوتر تنتج من خلط الألوان الأساسية الضوئية الثلاثة» وهي الأحمر والأخضر والأزرق. يأخذ كل لون من الألوان السابقة قيمة 
تتراوح بين 0 و 255» وهي مرتبة (أحمر أخضرءأزرق) أو (عuا8,١٣٥۴عإ4,6ع۸)‏ أو طو۲. في أي مكان نحتاج إلى أن نضع فيه لونا نقوم بوضع الجملة 
التالية 


rgb(R,G,B) 
فنضع قيمة ال۸ في مكانها المناسب. وال وال8 كذلك. يمكن أيضا صياغة العبارة السابقة بصورة أخرى هي الصورة الستعشرية» نقوم بوضع‎ 
وأقل‎ ۴f الأرقام السابقة بالتتالي فقي صورها الستعشرية» حيث أن أعلى قيمة عشرية للألوان هي 255 فإن أعلى قيمة ستعشرية لها هي‎ 
قيمة هي 00 لذا فان كل رقم يأخذ خانتين كالتالي .. ۸۸6688# ويفضل وضع علامة # قبل الأرقام في الصيغ الستعشرية حتى تتعرف عليها‎ 
جميع المتصفحات. أغلب الناس يستخدمون الصيغ الستعشرية في تكوين الألوان» يمكن الحصول على القيمة الستعشرية من القيمة العشرية‎ 
.Wا”ل0سك باستخدام الحاسبة التي تأتي مع ال‎ 


تستطيع بالطريقة التلىابقة تكوين أكثر من 16.5 مليون لون ولكن بعض الأجهزة القديمة لم تكن تدعم أكثر من 256 لون في نفس اللحظة» لذا 
فقد اتفق على 216 لون سميت بألوان المتصفح الآمنةء فاذا التزم الجميع بهذه الألوان سيستطيع المتصفحون أن يستعرضوا أكثر من صفحة 
واحدة في نفس الوقت دون مشاكل لأن عدد الألوان التي يحتاجها المتصفح هي 216 فقط والباقي احتياطي للأمور الأخرى مثل الواجهة 
وغیرها. 


إضافة إلى ما سبق هنالك ألوان معروفة تستخدم بكثرة» ولها أسماء معروفة وعددها حوالي 141 لون هذه الألوان يمكنك استخدامها بوضع 
اسمها فقطء وهي تنتمي جميعها للوح الألوان الآمن والجدول التالي يبين أشهرها : 


:الصيخة الستعشرية| الإسم 
Red _#fDOOD‏ 


TONE GIize Te 
ToL COloOr rho MOE 1 TNC Ii 


CTO lG TOC I TNE r 
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CTE COLT TELCO ID ON Cl OTL O 


TOD 


paınple I 
Sample 


saınıple 3 


الصور 


يمكنك في لغة ا11۷1 عرض الصور في الصفحات والتحكم في خواصهاء قبل كل شيء يجب أن تكون الصورة جاهرة للنشر على الويب» فيجب 
أن لا تكون ذا حجم ضخم لأن ذلك سيؤدي إلى بطء شديد في التحميل» ويجب الحذر جيدا عند التعامل مع الصورء لأنها تستهلك حجما كبيرا 
وتسبب بطءا شديدا في تحميل الصفحات. لذلك يفضل التقليل من الصور قدر الإمكان في صفحات اN١1۲.‏ 


لكي تستطيع عرض الصور في المستند يجب أن تكون الصورة من النوع ومز أو أو (أنظر تجهيز الصور للنشر على الويت). 


e MO a 
لمح نبوت سوقت ¶ - فيديو مضحك  خطوط - ترجمة‎ 
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H#7M1 العناوين‎ 


تستخدم العناوين في ا٧11‏ في الكثير من الأموں أهمها الوصلات التشعيبية والصوں ويجب أن تعرف كيفية استخدام هذه العناوين جيدا. 


هنالك نوعان من العناوين» نسبية ومطلقة» العناوين النسبية تكون بالنسبة للعنوان الحالي» فلو كنت مثلا في صفحة 
spئrosoft.com/ie/default.aاcاص.سttp://Nw‏ وقمت بعمل وصلة خاصية ٣۲٤۴‏ لھا تساوي |۳ oad.1nاdown‏ سیعرق المتصفح أن العنوان الذي 
يحب الذهاب إليه هو http://w .صcrosoft.com/ie/ download. hm"‏ ولو کانت re۴‏ تساوي htm‏ .ishاoad/engاnس0لd‏ فسیتجه المتصفح 
إلى http://w .صاcrosoft.com/ie/downاload/ english. html!‏ أي أن المتصفح يضيف السطر الموجود في 1۲٠١۴‏ إلى الدليل الحاليء ويختلف 
الملف عن الدليل بأن الدليل يحتوي على الشرطة الخلفية ( / ) في آخره» في كل دليل يوجد دليل خاص» هذا الدليل الخاص يؤدي بك إلى 
الدليل الأب للدليل الحالي وهو الرمز ( .. ) وفي المثال السابق لو كانت ۸۲6۴ تحتوي على ../١١٠٣05.1سل"‏ اس فإن المتصفح سيتجه إلى العنوان 
http://w w.microsoft.com/windwos. html‏ أي أنه سيخرج من الدليل ٠ا/‏ إلى الدليل الحذري / » أما العناوين المطلقة فتتميز بأنها مسبوقة 
باسم البروتوكول »متلا العنوان ۸3.00۳١۷W۷W.3۷//:ا۸/‏ يعتبر عنوانا مطلقا» وليس له علاقة بالعنوان الحالي. 


إدراجح الصور 


يتم إدراج الصور في صفحة ا1٧۳1۲‏ عن طريق الوسم 6٧1۷ء‏ وهو وسم مفرد ( لا يجتاج إلى وسم إغلاق)ء وهذا الوسم يحتاج إلى خاصية مهمة 
لگی تعمل بث >| يم طا 5٣١‏ والتى تضع بها عتوان الصورة المطلوية. 


<img SIC /imageS/ Sample. GIT 


توجد أيضا الخاصية ٣لا«‏ لتحديد عرض الصورة وأاواعط لتحديد ارتفاعهاء يمكن بواسطة الخاصيتان السابقتان تكبير الصورة وتصغيرها حسب 
المطلوب» وإذا كنت تريد إظهارها بالحجم الطبيعي فيمكنك ترك هذه الخصائص» فيحجر المتصفح للصورة حجما صغيرا إلى أن يحصل عليها 
فيجعلها بالحجم الطبيعي» ولكن الصور تشغل مكانا في الصفحة وتزيح النصوص بمقدار ما تشغله من مكان لذلك فإن الصورة الصغيرة تزيح 
النصوص قليلا والكبيرة تزيحها بمقدار أكبرء فالصفحات ستظهر بشكل مختلف عن الشكل الطبيعي إلى إن يحصل المتصفح على الصورة وإذا لم 
يجدها لأي سبب من الأسباب سيظل يحجر لها حجما صغيرا فقط ويالتالي تصبح الصفحة مشوهة» لذلك ينصح دائما باستخدام خصائص الحجم 
في وسوم الصور حتى لو لم تكن تريد تغيير حجم الصورة عن الطبيعي. 


<IMG SIC F"/imadgeSs/Samplé6.GqIif" 
width=73 heilght=68><br><br> 
<img src="/images/sample.gif" 


width=200 height=100> 
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توجد أيضا الخاصية ١9ا‏ وهي خاصية مهمة جدا في الصورء وتنبع أهميتها من كونها الطريقة الوحيدة للتحكم بكيفية عرض الصورة بالنسبة 
للنصوص المحيطة بهاء حيث أن الصور في ا٧11‏ تعتبر جزءا من النص المحيط بها تتحرك معه» وترتبط بهء تأخذ ١و‏ اة العديد من القيم فيما يلي 
سرد لها مع الشرح والأمثلة .. 


. وهي تعرض الصورة بحيث تكون على السطر مثل أي كلمة أخرى‎ : طttom,‎ baseline, absbottom, e 


<img src="/imagéesVsample.gif" align="bottom"> 


4 
' you are trymg to reach a secure site, make sure your Security setngs can support it. Lick the Tools 


mei, atid then cick Internet pons. n the Advanced tab, scroll to the Security secon aid check sethas lof 
MN aM SN EU MS ENI 


٠‏ اها : وهي تعرض الصورة على يسار الفقرة ولا يكون للصورة علاقة بالسطر. 


<img src="/images/sample.gif" align="left"> 


٠  Fyou ate trying to teach a secure site, make sure yout Security sethas cah support it. lick the 
7 Tools meru, and then click Internet Uptons. n the Advaiced tab, scroll to the Security secon and 
کک‎ check settigs for BOL 2.0, SSL 30, TLS 10U, PCT 1U. 


eاabsmidd‏ ,eاddاصm‏ : وهي تعرض الصورة في منتصف السطر. 


<img src="/images/sample.gif" align="middle"> 
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¬ 
r 8r Tou afe trig to reach a secure site, make sure your Security settings cat support it. Lick the Tools 
hm 


menu, and then click Internet Jptions. On the Advanced tab, scroll to the Security section and check settings for 
CC TET DOT 


د زو وهي تفرص الصةرة على يمين الفقرة ولا تكون للصورة عغلاقة-بالسطر. 


TCIMG FCS" IMAGES / SAME LE. OIE" ALIGHT TIGRE™> 


lt you ate trying to reach a secure site, make gure your mecurity setngs can support ıt. lick the ۳ 2 
Tools menu, and then cick Internet Uptons. On the Adranced tab, scroll to the Security secon and r 4 
check settings for SDL 2.0, SSL 3.0, TLS 1U, PFET IU EEet 


صtextt0 tp,‏ : وهي تعرض أسفل السطر فيكون السطر أعلاها. 


<img src="/images/sample.gif" align="right"> 


lf you ate trying to reach a secure site, make sure your Security settnmgs can support ıt. lick the ۳ e 
Tools menu, and then cick Internet phons. Un the Advanced tab, scroll to the Security section and ا‎ 
check settngs for SSL 2.0, Sol 3.0, TLS 10U, PCT 1U. ٣ 


E 


توجد أيضا خاصية لوضع إطار حول الصورة هي الخاصية 00۲۵١‏ ونحدد بها عرض الإطار بالبكسلء والقيمة 0 تعني دون إطارء إذا لم تحدد قيمة 
للخاصية ١6ل0۲ط‏ في وسم الصورة. فإن الصور ستظهر بدون إطار في الحالة العادية ومع إطار إذا كانت الصورة عبارة عن وصلة» لذلك يعمد 
الناس إلى وضع 50۲۵۲="0" في جميع الصور لإخفاء الإطار حتى لو كانت الصورة عبارة عن وصلة» ويجدر بالذكر أن لون الإطار في الوصلة 
الجديدة هو نفس لون النصوص في الوصلة الجديدة وكذلك بالنسبة للقديمة. 


E Niel INTO: UW MICLOSOLL CONM/ 

CE ES OOS N E C> Oo 

< Niel LILO WY MICELOCOLL COM 

<img src="/images/sample.gqif" border="0"></a><br> 


<IMG SIC "/imades/ Sample. Gif" Dorder Ts 
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يمكنك أيضا تحديد عرض الحاشية حول الصورة أو المسافة بين الصورة النصوص المحيطة عن طريق الخاصية ع٤2مء.‏ 


توجد أيضا خاصية اة للصورء وهي تستخدم لوصف الصورة» بحيث أن النص الذي تضعه في الخاصية ااج سيعرض بدلا من الصورة حتى إتماما 
تحمتلهاء وكذلك إذا لم يجد المتصقح الصورة» وهذه النصوص أيضا تظهر في مربع التلميح م١0٠۲‏ عند التأشير بالفأرة على الصورة. 


حرائط الصور 


في بعض الأحيان تجد أن هنالك صورة عليها أكثر من بقعة ساخنة كأامم؟ ام١٣‏ بوصلات مختلفة. هذه الصور يتم تقسيمها إلى مناطق مثل 
الخريطة» وما يلي هو كيفية عمل ذلك. 


تتكون الخريطة الصورية من جزئين. الخريطة والصورة» جيث تقوم بتصميم الخريطة وإعطائها إسماء تم نكتب هذا الإسم في خاصية عك 
للصورة. 


في البداية نشرح كيفية تكوين الخريطة لصورة مثل هذه الصورة 


6 ارا تقشيم الضورة السانة فستكون التقسيم (الخرطة كالالف 
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أي بحيث يشير كل حزء من الأجزاء الثلاتة إلى أحد أقسام الموقع الإفتراضي» مهمتنا الآن هي رسم الخريطة السابقة وتحديد البقع الساخنة 
والوصلات عليهاء ويتم ذلك باستخدام الوسم م۵٠‏ ونحدد إسم الخريطة بالخاصية ۳۵٠١ء‏ ونقوم بوضع الأشكال بين وسمي الفتح والإغلاق 
للوسم "3P‏ والأشكال تكون في صورة وسوم 3۲83 مفردةء نقوم بتحديد الشكل عن طريق الخاصية ع۸3 ثم نقوم بتحديد الوصلة بالخاصية 
۴اا ونحدد إحداثيات الشكل بالخاصية كل00۲» ويختلفكل شكل عن الآخر بطريقة كتابة إحداتياتهء والأشكال تثلاثة هي : 


ه٠‏ ماعا : وهو شكل الدائرة. وتكون إحداثياته عبارة عن الإحداثي السيني للمركز ثم الإحداثي الصادي للمركز ثم نصف القطر ( ,۷ ,× 
.(radius‏ 

e ٠‏ مي شكل الماش وتكون إحداثياته عبارة عن الإحداثي السيني للركن أعلى اليسار ثم الإحداثي الصادي له ثم الإحداثي 
السيتي للركن المقابل أدنى:اليمين ثم الإحداثي الصادي له (۷2 ,2× ,۷1 ,1). 

٠‏ امم : وهو شكل المضلع»ء ويمكنك باستخدامه رسم الأشكال المكونة من عدة قطع مستقيمة» وتكون إحداتياته عبارة عن الإحداثي 
السينى ثم الصادي للنقطة الأولى ثم الثانية وهكذا حسب ما تشاء من النقط (۷۸ ,× .. ,۷2 ,2× ,۷1 ,1). 


ويجب أن تعرف أيضا أن نقطة أعلى اليسار هي نقطة الصفرء وكلما تتزل إلى الأسفل تزداد قيمة الإحداتي الصادي وكلما اتجهت إلى اليسار 
تزداد قيمة الإحداثتي السينى. 


لمعرفة الإحداثيات المطلوبة نستخدم أي برنامج للرسم Paint Shop Pro 9Î Adobe Photoshop Ji‏ . 
في مثالنا السابق تم حساب الإحداثيات وكانت النتيحة كالتالى : 


<img src="/images/sample2.gif" usemap="#mymap"> 

<map name="mymap "> 

<area shape="rect" href="http://www.jJokes.com/" 
COOL I =O IO O AS 

<alféea Shaler CIrFCIE" hNhrel NLD: WWW. SLOFY.COM/ 
COOLS NIA O  S 

<area shape="poly" href="http://www.download. com/" 
COOL IZ E OS TI OTS TD A TOS 


< maz 
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ستلاحظ الآن أن الصورة مقسمة إلى عدة مناطق ساخنة كل منها يشير إلى وصلة مختلفة» عند النقر على أحدها يظهر حوله إطار أسود» 
يمكنك إزاله هذا الإطار والتحكم بسماكته بالخاصية 6۲ل0۲ط في الوسم عم۸2ء» تستطيع أيضا أن تحدد ااج مختلف لكل قسم من الصورة 


باستخدام الخاصية ااج في الوسم €٥٤مŠS12P.‏ 


<img src="/images/sample2.gif" usemap="#mymap" border="0"> 
<map name="mymap "> 
<area shape="rect" href="http://www.jokes.com/" 

COO ISTO OAT 

border="Û0" all="Be Happy"> 
<arêéa Shapeée=—"circle" href —"hNlILD://WWW.SEOLY.COM/" 

COOL IST OT 

DOrdeEr =U alTC = TENIOYI 
<area shape="poly" href="http://www.download. com/" 

AO OM ESS OS CO 


DOLCE TID EET DILI 


Maz 


| برامج - ماسنجر e۲ع۸مووم"‏ - العاب 
مج ية سفت » - فيديو مضحك - خطوط - ترجمة 


مواقع - العاب فلاش 
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تنظیم | لمحتو ى 


يمكنك تنظيم المحتوى في لغة ا1۲۷ في عدة أشكال» يمكنك مثلا وضعه في صورة قائمة مرتبةء أو في صورة شجرة (مخطط هرمي) وأهم 


أنواع تنظيم المحتوى هي الجداول. 


يمكنك عمل القائم المرتبه باستخدام الوسم |0 والغير مرتبة الا بحيث توضع البنود بينهما وكل بند يحدد بالوسم أا» ويمكنك تحديد نوع الترقيم 


في القوائم المرتبة بالحروف أو بالأقام العربية أو الرومانية وغيرها عبر الخاصية 8لا وتأخذ أحد القيم التالية : 


a,4 ,,2 ,: 1 

..,a, D, Cc, d:a 

..,A, B,C, D:A 

آ : | رآ ,أا ,آ, .. 

.. ,I, I, II, IV I 
: وفي القوائم الغير مرتبة‎ 

: circle 


: square 


: disc 


ويمكن وضع قائمة داخل قائمة لتشكيل المخططات الهرمية. 


<UL Lype="ClrEClE > 
<li>Pepsi 
CIITA 

N 


Ul 


<ol Lype="1["> 


TT NN CE) 


| برا مج ك a : ME‏ 


عانم آخر سی الا ات - العاب فلا فلاش ‏ “ 
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RET TETD 
cl Mc) 
Td TS 


cO 


oll 
<li>American Companies 
OT 
OM CEE 
<li>General Motors 


COL 


<li>German Companies 
Ol. 
E N 
Cl BM 
UZ 
I CCL 
dE eS 
N 
E 


MN 


o Feps1 
o rash 
ت‎ ۶ الp‎ 


Windows (5o) 
Linus (I00) 
ETE 
ther Ao) 


Atnericah orp alles 
1. Microsoft 
A. aeheral llotors 
erman oimp ales 
1. Dubiah 
A. EW 
" Û a8 
TOOEEE 


_ | برامج - ماسنجر ۲٥ع,۸عءوم×۷‏ - العاب 
رحج ية سفت -فيديو مضحك - خطوط - ترجمة 
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الحداول 


تعتبر الجداول من أهم مكونات صفحات ا1۳۷ وجميع التصاميم الإحترافية تستفيد من الجداول لتصميم الصفحة وتوزيع الكائنات عليها 
وتشكيلها في القالب الذي يريدونهء يتم إدراج الجدول بالوسم عاطها وداخل الجدول يجب إدراج صفوف ١‏ وداخل الصفوف توجد البيانات لاء 
يمكن وضع إطار للجدول بالخاصية 50۲۵6۲ حيث نحدد فيه سماكة الإطار المطلوب 0 تعني دون إطار,ء القيمة الإفتراضية للإطار هي 0. 


<TLablé Border rr. 
EIT 
CTIA EIT EKO Fir Dila 
EI EILSTE Toy CSETCOUNd Volta 
E 
EM 
<Ed-SECOUNd Faw First Wala 
<TU-SECOUNd Kaw >. SecCound Datla 
EN 


Tbe 


First Eow - First Data First Row - pecound Data 


Second Raw - First Data Second Raw - Secound Data 


يمكنك أيضا التحكم بالمسافة بين الخلايا بواسطة الخاصية و١1أ٤ةمءااعء.‏ والمسافة بين الحدود الداخلية للخلايا ومحتويات_الخلايا بواسطة 
الخاصية .cellpadding‏ 


<lLablé cCcellSpacing="l0" cellpadding=" 20" border="]'"> 
EET 
TO EIT lL CELA 
TIS ECOUNA CELIA 
E 


cJléblE 


First ell meEcouhd el 


برامج - ماسنجر ۸8٥۲‏ ووم - العاب 
ج هة E‏ - فيديو مضحك - خطوط _ - ترجمة 


عالط آلو صي المراصبع مواقع 5 العاب فلاش 
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يمكن التحكم بعرض الجحدول بالخاصية ١لا« وارتفاعه بالخاصية اطواعمط وكلاهما يأخذ قيما مطلقة أو نسب مؤية» ويمكن استخدام هذه‎ 
الخصائص في الخلايا ك أيضا وعند إعطاء الخلايا قيما نسبية فانها تحسب بالنسبة للصف الذي هي فيه.‎ 


<table width="100%" helght="100%" border="1"> 
EET 
<Ed width=" 100" height ="A40STSEIrTSE Cell 
<td width="100%" helght="40%">Secound Cell 
E 
a, 
<Ed width "I00" NEeEiGht>"GOOCTSEITSE Cell 
<Cd width "IOUT" Telghlt "OU TT ZSECOUNGd Cell 
EE. 


‘TBI. 


First 
اام‎ ceEcound ell 


First 


SeEcohd ell‏ اا“ 


يمكن التحكم بلون خلفية الجدول بالخاصية 010۲ء وط ويمكن تعيين صورة في الخلفية بالخاصية ٣١‏ ا9۲0)٤3ط.‏ يمكن استعمال هذة الخواص في 
الخلايا ل أيضاء وعند تعيين قيمة ١010ء‏ وط للجدول مختلفة عن قيمة أحد الخلايا فان لون الخلية سيطغى على لون الجدول في تلك الخليةء 
لأن الخلية موجودة فوق الجدول في ترتيب الطبقات. 


<LlLable border="l" DbDackKOroOuUNd=TSaAmGOLlE. GILE WwICdLhN<T IO" helghNl = TOOTS 
ETT. 
TU Docolor Tiellowl EIrSL Cell 
TAZ SECOUNGd Cell 
ET 


C/E lez. 


برامج - ماسنجر ۸8٥۲‏ ووم" - العاب 
- فيديو مضحك - خطوط - ترجمة 


عام خر ن الياقتة مواقع العاب فلاش 
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Seco ell 


يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية ١9ا‏ ورأسيا بالخاصية اه۷ في الخاصية ١9وا‏ القيمة 6۴ا تعني محاذاة لليسار و ۸أوام 
لليمين و ١6۲١ء‏ بالمنتصف و ۴۷أاكداز للضبط الكلي تجعل الأسطر مساوية في الطول. أما الخاصية ١وااج۷‏ فتأخد القيمة مها للأعلىء 0۳٤اهط‏ 
للأسفل ءعاللأ" للمنتصف. 


<table border="1" width="90%" height="80%"> 
ETE 
Td alIgGhn right. Valin  DOLTOM ZEIT Cel 
<TLad Align Tle" vValiON LOC SECON CELL 
EE 


<l bleE 


peEcound ell 


First ell 


يمكن أيضا وضع جدول داخل جدول» عن طريق وضع الجدول في أحد الخلايا ك وهنا يحسب عرض الجدول الداخلي النسبي بالنسبة لعرض 
الله الى تختونة والموخوذة قى الجدول الخا رخف 


<lLable widlh=" 955" bDorfder=T"]r> 
EE. 
TOU EITC TEL FITET CEN 
CTE 
<Eable border rls 


GEZ 


برامج - ماسنجر e۲عہ‏ ووم" - العاب 
احج ية سوقت ١‏ - فيديو مضحك - خطوط - ترجمة 


عام خر صي لافج مواقع - العاب فلاش 
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<Q SECOUNGAd Table = TIirst Cell 
<TIAZ2SEeCOUNd Table = Secound Cell 
TY 
</table> 
E 
EET. 
CEA 
<table borders 
EE; 
TA INILd lob leE FILS. Cell 
CTA TIhNILd lable > SECOUNGAd CELL 
N 
Tbe. 
CTA EIT SE TAblE Tour IN CELL 
LT 


<ZEablez 


mecound Table - First cecound Table - Secound 


First Table - First ell أ“‎ el 


Third Table - First Cell ۰ Table - Secound First Table - Fourth Cell 


يمكن أيض دمج الخلايا رأسيا بالخاصية١ةمW5ه]۲‏ وأفقيا بالخاصية ٤01503١‏ حيث تحدد في كل منهما عدد الخلايا التي يجب دمجها في الخلية 
الحالية» وتستخدم هذه الخصائص في الخلايا ل. 


<TabDlE border Tr. 

E. 
TA Tou DANL TST OLSON TITEL CELL 
<td>Secound Cell 
TAZ INIEFd CEI 

E 

EET 
TGA TOSI TOUT CEI 
Ed Colcpan EFT EITTh Cell 

E 

TET. 


CEO IST CELL 


e MOE 
مج تة سوقت - فيديو مضحك - خطوط - ترجمة‎ 


عام خر مئ اليراهجع مواقع العاب فلاش 


http://www.sh3bwah.com/ 
<td>Seventh Cell 
EA EIGEN Cell 
TA NinELh Cell 
TS 


VIALE. 


First el pecoumnd Gell 
Fourth ell 


First ell 


Third ell 
Fifth el Seventh ell Eighth el (MNmth Cell 


£ 


الأطر 


تستخدم الأطر كه٣٠ه۲‏ لتقسيم المتصفح إلى عدة إطارات واستعراض عدة صفحات في نفس الوقت. كما يمكنك تبادل الأوامر بين هذه 
الصفحات. فيمكن عمل صفحة مستقلة تحتوي على فهرس الموقع» وبعد ذلك تضعها في صورة إطار يظل على يمين الشاشة» وكلما ضغط 
المستخدم على أحد الوصلات فئ القهرس. يتم تحميل الصفحة في الإطار الآخر الذي على اليسار والذي يحتل الحزء الأكبر من الشاشة 
عادة. هذه الطريقة تتبع في الكثير من المواقع لتسهيل الأمورء فكيف يتم ذلك. 


فقي البداية هنالك صفحة الإطارات. تحدد في هذه الصفحة تصميم طقم الإطارات الذي ستستخدمه»ء وما هي الصفحة التي يجب عرضها في 
كل إطار أن كل صفحة تكون محفوظة قىي ملف مستقل الوحدها. قي صفحة الإطارات ستستخدم وسوم الإطارات .| ولگى باقي الصفحات 
ستكون صفحات عادية غالبا دون إطارات. 


أول وسوم الإطارات هو الوسم أعكع ه٣‏ الذي يفتح مجموعة الإطارات» وفي هذه المجموعة يوجد عدد من وسوم الإطار ۲2۳۴ المفردة ونضع 
فيها مصدر الصفحة في الخاصية 5۲٤١‏ أو يمكننا وضع اعكع” ه۲ أخرى داخل ال امكمصهء؟ الأولىء ويوضع الوسم ۴۲۳656 خارخ منطقة الجسم 
۷ط دائما» نحدد في الوسم ۳٤5€‏ ه۴۴ إذا كنا سنقسم الصفحة أفقيا أو رأسياء ونحدد حجم كل إطار إذا كنا نريد تقسيم الصفحة رأسيا على 
شكل أعمدة نستخدم الخاصية كاه» ونضع فيها عرض كل إطار بحيث يفصل بين كل إطار والآخر فاصلة ( , ) وهذه الحجوم قد تكون نسبية أو 
مطلقة وتختلف في احتواء النسبية على علامة النسبة المؤويةء واذا أردنا تقسيم الصفحة أفقيا نقوم بعمل نفس الشيء ولكن باستخدام 
الخاصية ۲٥۷5‏ بدلا من كاه متلا إذا أردنا تقسيم الصفحة رأسيا إلى ثلاثة أعمدة الأول بعرض 100 بكسل والثاني بعرض %10 من الشاشة 
والثالث يحتل باقي الشاشة تكون مجموعة الوسوم هكذا : 


SEFToMCESEE Col TIO IO TS 
Trae SILC TSaAMpGlIEL NEML 
<TraMle SEC TSaAMGOLE2 DIMI Z> 
<EFame SEC Sample 3.BHIMILITZ 


CTT EEL 


برامج - ماسنجر ۸8٥۲‏ ووم[ - العاب 
- فيديو مضحك - خطوط تر جمة 
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Page I Page 
2 


<frameset rOWS="50,*"> 


وكما ذكرنا يمكنك وضع ٤5€٤‏ "ه۴۲ آخر بدلا من أحد الإطارات f۳٤‏ 


<IErame SLC SaClLEL HEMI 
<TC Col TIO, 
EEA: GIC SAMO HEMI 
CErEaAmMES STC SAM OlLC HINL 
</frameset> 


CJT ECEE 


Page 1 


Page A 


يمكنك وضع أو إزالة الإطار الذي يظهر حول الألواح باستخدام الخاصية ۴٣٠۳٥50۲٥١‏ إذا ضبتها عند القيمة 0 لن يظهر الإطار و 1 يظهر الإطان 
يمكنك التحكم بحجم الإطار عن طريق زيادة أو إنقاص المسافة بين الألواح وذلك عبر الخاصية و9١ ۴۲2٣6503)‏ فتضع فيها القيمة التي تريدهاء 
مك ظط الخاف ان السافان عد 0 لمت المس دم من تد حخحواالاة 


<frameset cols="50%5,*" frameborder="0" framespacing="™"O0"> 
<Erame SIC TSamMGlEL HEMI 
CEraME SIC SAMOLC DIMI 


CET MESO 


برامج - ماسنجر ۸8٥۲‏ ووم" - العاب 
مج تروت ونت - فيديو مضحك - خطوط - ترجمة 


عانم آخر نالرات __ مواقع - العاب فلاش 
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يمكنك التحكم في ظهور أشرطة التمرير 83۲5 ااه5)۲ في كل إطار من الإطارات عن طريق الخاصية و١ااها٤ء‏ وهي تأخذ القيمة ١هر‏ لإظهار 
أشرطة التمرير دائماء والقيمة ٣١‏ لمنع ظهورها دائماء و 0ناج لإظهارها وقت الحاجة إليها فقط. 


<frameset rOWS="20,*"> 
<TTomMe CIC Tamo lel NMI CCTOlIING NON 
<fToamesel COoOlSZ TIO, TT 
cTTame SIC NSAMplICEZ. MIMI" SCCTOlIING yes. 
<frame Src" sample d.himlTz 
</frameset> 


E MEE 


لكي تستطيع أن ترسل أوامرك ووصلاتك من لوح إلى آخرء يجب أن تقوم بتسمية أو عنونة الألواح بواسطة الخاصية ٠۳ه”٠.‏ ويعد ذلك لعمل 
وصلة بواسطة الوسم ه استخدم الخاصية ۲96ا لتحديد وجهة الوصلة» يمكنك فتح الوصلة في شاشة متصفح جديدة _)”هاط أو فتحها في 
الشاشة الحالية فوق مجموعة الألواح _م0] أو فتحها في اللوح الحالي _اعء أو فتحها في اللوح الأب (في حالة ألواح داخل ألواح) _٤”عاهم‏ أو 
فتحها في أي لوح بوضع إسم اللوح. 


Samo lE4. NIM‏ ج 
<a Nretl Sample. NEML!‏ 

ا اا را ا ا ا ا 
<a href="sample3.html"‏ 


Corel OB TI TS DET 


_ | برامج - ماسنجر ٥۲‏ ۸۶ ووم - العاب 
راج تبت سو - فيديو مضحك - خطوط - ترجمة 


عانم خر اي الراد_ مواقع العاب فلاش 
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<a href="sample2.html" 
target="main">Page 2</a> 
<a href="sample4.html" 
target="main">Page 4</a> 
<frameset rOWS="20,*"> 
<frame src="samplel.html"> 
CFroaMeceltl CoOlST< IO TS 
<frame src="sample4.html"> 
<frame src="sample3.html" name="main"> 
</frameset> 


CVIEEaMESO 


إضافة اما س وح ا اطار ا ع ا کو اہک مثل الد تہ هذا الاطار فی آ۴ بالمستند تحت 
القo E EE, ira r o O O‏ ي المستند المصدر 
الذي يجب عرضه في الإطار, يمكنك أيعاونه ا 0 اد" وعمل وصلات موجهة إليه تماما مثل الإطار العادي, وفيما بده مشل الإطار 


يمتلك أيضا خاصية ٣الأW‏ و ااواعط لتحديد حجمة 


النماذج 
إرسال البیانات عبر مام 


عندما تريد إرسال المعلومات من متصفح الويب» إلى مزود الويب فإنك تستخدم بروتوكول ما في عمل ذلك وينص بروتكول ما على أن 
البيانات ترسل في صورة أزواج» كل زوج عبارة عن إسم وقيمةء مثلا إذا أردت إرسال إسم المستخدم عبر بروتوكول ما فإنك ترسل العبارة 
التالية ز۳۴٣2۲ط۳"u=عصهم‏ هذا يسمى زوج لأنه يتكون من جزئين» الجزء الأول هو إسم المعلومة (ع۳ه,)ء والجزء الثاني هو المعلومة نفسهما 
(ز6٣اaطuص)»‏ وإذا أردت أن ترسل أكثر من معلومة فانك تفصل بين أزواج المعلومات بعلامات & فاإذا أردت أن ترسل الإسم والبلد فانك ترسل 
العبارة التالية زعcountry=Kuvaitkname=mub2a۲۳‏ يمكنك أن تكتب العبارة السابقة کJتاlلJى name=mubarmej&country= Kuwait‏ حیث أن 
الترتيب ليس مهما إلى هذه الدرحة» إضافة إلى ما سبق فان هنالك شروطا على إرسال البيانات في صورة عناوين ١۲ا‏ ولأن المعلومات عادة ما 


برامج - ماسنجر ٥۲‏ ۸8 ووم" - العاب 
ب فيديو مضحك کک - ترجمة 


لج نة سوت 


عانم افر اا "يرطع 
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ترسل ملتصقة بهذه العناوين فانه لا بد من تحويل سطر البيانات السابق بحيث يصبح مطابقا لمواصفات ١۲لاء‏ وأول شيء هو أنك لا تستطيع 
وضع المسافات. لذا فقد اتفق على أن جميع المسافات في البيانات تحول إلى إشارة ( + )ء فإذا كان البلد هو لعاأ١لا‏ كعاهاك فإن سطر 
البيانات سيكون زع"States&gname=mub2۲+c0untry=United.‏ وهنالك أيضا شروط أخرى لتحويل الرموز الغير انجليزية والكثير من الأشياء 
التي يتم تطبيقها على البيانات حتى تصبح جاهزة للإرسال. 


المسافات اليصاء : هى المساقات والأسط الجديدة وعلامات الحدولة. 


ينص بروتوكول ا٣‏ أيضا على أن البيانات ترسل بطريقتين» الأولى تسمى اه9 والتانية تسمى أكهم» يتم إرسال البيانات بطريقة ا96 بصورة 
بسيطة جدا حيث تكون عبارة عن جزء يضاف إلى إسم البرنامج الذي سيستفيد من البيانات» مثلا إذا كان لديك برنامج يأخذ الإسم والبلد 
ويخزتها على المزود» وكان عنوان هذا البرنامج هو أgع.أمpأاsomewhere.c0m/scء//:http‏ فان طريقة اعقو ستقوم فقط بعمل إضافة إلى العنوان 
السابقة هذه الإضافة هي عبارة عن علامة استفهام يليما سطر البيانات الذي جهزته» فيصبح إسم الصفحة 
7/m rE COM CFE. COL Ramê mi barme ECOUREEYV=UNRIEEeEQd Sta ÈeS‏ ولا د من نك صادفت شیئا كهذا وربما 
أكثر تعقيدا في مربع الوجهة في متصفحك خاصة عندما تزور المواقع الضخمة وتجحري عمليات البحث وغيرها». ستخد كل هذه البيانات في 
شريط العنوان. هذا بالتسبة الطريقة 96 في إرسال البيانات» أما الطريقة الثانية فهي طريقة أكهم وفيها يتم إرسال لوحدها مع طلب الموقع ولا 
تظهر البيانات في شريط العنوان» تختلف الطريقتان عن بعضهما البعض في أن الطريقة ا6و أبسط بكثير ويمكنك بسهولة استخدامها كوصلة 
عادية بأن تركب سطر البيانات بنفسكء ولكن أكمم لا يمكن عملها في صورة وصلة بسهولة» حيث أنها لا تعمل إلى عن طريق النماذج ( الإثنان 
يعملان يشكل ممتاز بالنماذج ) لكن طريقة اكهمص أفضل من اهو في أنها مناسبة لإرسال كمية كبيرة من البيانات مثل نص رسبالة كاملة» حيث 
يتعسر عرض هذه الأشياء في عنوان الموقع» كذلك البيانات والإتصالات السرية يجب أن تتم بطريقة أكمم ( هذا لا يعني أنها آمنة للشراء عبر 
الويب وإنما تحتاج إلى تقنيات أخرى ). 


مهمة النمادح 


بعد أن عرفت كيف يتم إرسال البيانات» يجب أن تعرف مهمة النماذج في كل هذاء تعطيك النماذج واجهة سهلة لإدخال البيانات مثل مربعات 
النص وقوائم الإختيار ومريعات نعم/لا والأزرارء وغيرها من الأدوات» كل ما عليك فعله هو تحديد مكان البرنامج 
script. cgi (‏ /somewhere.comء//:ttp)‏ في مثالنا السابق» والطريقة التي تريد اتباعها (أعو أو اكمم). والبيانات التي تريد إرسالهاء وتحدد بعض 
الألوان والأحجام وتصمم الحقول وتضع زر الإرسال (أ"طاء) وانتهى الأمرء كل ما على زائر الصفحة الآن هو أن يملا بعض الحقول ويختار بعض 
الخيارات. ويضغط زر الإرسال فيقوم المتصفح بجمع البيانات وتحويلها وتجهيزها تم إرسالها إلى المكان الذي حددته وحسب الطريقة التي 
حددتهاء النماذج بالفعل هي أفضل طريقة تفاعلية في لغة ا1١1۲.‏ 


يتم إدراج النموذج بالوسم 0٥۲۳‏ ويتم إدراج المعلومات في صورة وسوم الام |٣‏ مفردة» يحتوي الوسم ۴0۲۳ على مجموعة من الخواص أهمها 
eti‏ وفيه تحدد عنوان البرنامج الذي سيستفيد من البيانات» والخاصية الثانية هي ١٥۸0ع"‏ وفيها تحدد طريقة نقل البيانات إما أكهم أو امو 
أما الوسوم الام”¡ فأهم خاصية فيها هي عم وتحدد فيها نوع الكائن الذي سيأخذ المعلومة من المستخدم ويأخذ أحد القيم التالية : 


ه٠‏ ×" : وهو أشهر طرق إرسال المعلومات ويظهر في النموذج في صورة مريع نص يمكن للمستخدم إدخال أي شيء فيه. 
Button‏ : لعمل زر ويستفاد من الزر في عمل أي شيء. 

heckb0×‏ : لعمل مریع اختیاں إذا تم اختیاره فانه یرسل القيمة 0١‏ وإذا لم یتم اختیاره فإنه لا يرسل أي معلومة. 

۰ آ۴ : لإرسال الملفات. 


E‏ برامج - ماسنجر ۸8٥۲‏ ووم - العاب 
٤ ۷‏ زز 2 سوقت ۴ فيديو ey‏ ت خطو ط ترجمة 


مواقع - العاب فلاش 


عانم أخر صن اليراقج 
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Hidden ٠‏ : يرسل المعلومة التي تريدها بالقيمة التي تريدهاء ولا يظهر أي شيء في صفحة 1711ء تستطيع عن طريقه دمج معلومة 
ها واخل ملف ۲۳ حيبت لا بقلم عا الخدم ول خا الى خها 

ه٠ [m29 e‏ : تستخدم في الكثير من الأمور مثل الزر. 

ه٠‏ swordكهP‏ : يستخدم لإرسال كلمة المرور» وهو يرسل كلمة المرور بصورة واضحة دون أية تشفير وإنما يختلف عن مربع النص 
العادي في أن الحروف تظهر في صورة نجوم ( * ). 

٠ه‏ 0 Rd‏ : يستخدم لعمل الدوائر لكي يختار المستخدم قيمة ما من عدة خيارات. 

ه٠ Reet‏ : يستخدم لمحو محتويات النموذج وإعادته إلى الحالة الأصلية. 

٠‏ ااbmiطSu‏ : يظهر في صورة زر يستخدم لإرسال المعلومات الموجودة في النموذج. 


يمكنك أيضا إرسال المعلومات مع النموذج بواسطة وسمين آخرين يوضعان أيضا بين وسمي ۴0۲۳١‏ وهذا الوسمان هما ا)6اعء لعمل قائمة اختيار 
والوسم 3۲۴2×ع لعمل مريع نص متعدد الأسطرء وبين وسمي ا6ء نضع عدة وسوم ١0أم0‏ كل واحد منها يعبر عن بند في القائمة ويكون 
لكل بند قيمة معينة وترسل قيمة البند الذي تم اختياره. 


ت 


لقد قمت بعمل برنامج صغير موجود على المزود يقوم بأخذ المعلومات التي ترسلها بأي من الطريقتين ويعيد لك النتائج في صورة جدول 
ENC NNN yT‏ 


إسم البرنامج أط.10ءع وهو موجود فقي الدليل الذي به هذا الملف لذا سنقوم باستخدام المسارات النسبية ونحدد الخاصية 3٤)0١‏ قي تجاربنا 
على القيمة أم.٥1ءء‏ دائما. 


أنظر إلى المثال التالي : 


<TOEM aclion=" echo. CIZ 

i dG MC DC TDG TS 
CeO MMC TS O TL SS 
<input type="radio" name="exact"> Exact Match 

<IinPUL type "rtadio" Nname="all’> All WordS<bDE> 

<input type="hidden" name="todo"™" value="search"> 

<input type="submit" value="Search"> 


<JTOEM 


First Name :l_ j 
Secound Name: 


O Exact Match O All Words 


برامج - ماسنجر e۲عہ‏ ووم" - العاب 
مج وة سوقت - فيديو مضحك - خطوط - ترجمة 


عابم اشر ين "تراط مواقع - العاب فلاش 
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نو واضا فى الهال السانق. كيف تم تقل المفلومات عبر الوت باستخدام طرقة عن وإذا أعدة التجرة السابفة باستخدام الطرقة 5ة‎ 
فسوف تحصل على نتائح مطابقة لأن البرنامج الذي أعددته (ام.۸0٥8) مجهز للتعامل مع الطريقتين.‎ 


مربع النص 


نقوم بوضع مربع النص كما ذكرنا سابقاء باستخدام الوسم الام١أً‏ مع تغيير الخاصية عم له إلى القيمة ×6 ويمكننا وضع أي محتويات ابتدائية 
نريدها فيه عن طريق الخاصية عuاة۷‏ له» ويمكن أيضا التحكم بحجمه عن طريق الخاصية 28أك. لتحديد طول المريع الذي نريده. 


<TOEM acllon="echo.pl" meltllod="gelTz 

Username <input type="text" size="20" name="username"><br> 

Email <input type="text" size="40" name="emall"><br> 

URL <INPUL LyDE "lLeKL" Sl26 "10" Hame "Url" valle "NLC: ><DILZ 
<InpUL LVDE "SUDMILL 


CTO 


EL, http:# 


مربع الإختيار 


وهو يوضع بالوسم اام"| أيضا بتحديد الخاصية عا اهاعد القيمة ×0ط)ء16ء. ويمكن بالمعلومات التي سيتم إرسالها عن طريق الإسم 
بالخاصية ٣2۳۴‏ والقيمة بالخاصية ٥۷ا۷‏ فيمكننا مثلا أن نجعل النموذج يرسل المعلومة عطأاZ٤ءطاء=ه‏ إذا قام المستخم باختيار أحد مربعات 
الخيار» وذلك بضبط الخاصية ٣,۳٥۴‏ له عند القيمة 40 والخاصية عuااج۷‏ له عن القيمة عطأ5)۲ئطلاكئ» وعند عدم اختيار مربع الخيار فلن يتم إرسال 
آي شيء يتعلق به. 


أي أنه مثل النوع ۸1۵08١‏ إلا المستخدم هنا يحدد فقط إذا كانت المعلومة سترسل أو لا. 


<IOEM acllonNnz"ecNO. pL" method Gel 
<input type="checkbox" name="do" value="subscribe"> Subscribe.<br> 
<INpPUL LyDE "SUCMIL 


CTO 


LI Subscribe. 


إرسال استحام 


برامج - ماسنجر e۲ع‏ ووم - العاب 
احج ية فح - نيديو مضحك - خطوط - ترجمه 


عالم خر سن الامج مواقع - العاب فلاش 
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الإختيار من متعدد‎ 


يمكنك عمل دوائر الإختيار من متعدد بواسطة وسوم الام |٣‏ بحيث تضبط خاصيتها عم عند القيمة 0أله)۲. ولعمل مجموعة من الوسوم التي 
يجب على المستخدم اختيار أحدها قم بعمل وسم ألام١|‏ لكل واحد منها واجعل قيمة الخاصية ١3۳۴‏ متساوية فيها جميعا مع تفيير قيمة 
الخاصية علا۷2 في كل منهاء فيكون عندنا نيابة عن جميع هذه الأزرار معلومة واحدة اسمها يحدد بالقيمة ۸3۳۴ وقيمتها حسب قيمة الخاصية 
عمuاva‏ للزر الذي تم اختياره. 


<EOIM aclIioOn-lecCcHO.BlI" TCLIONn Gel > 

Age : <br> 

<input type="radio" name="age"” value="l1l7"> 10 = 17<br> 
<input type="radio" name="age" value="50"> 18 - 50<br> 
<input type="radio" name="age" value="10U0"> 51 = 100<bBErE> 
Gender : <br> 

<input type="radio" name="gqender" value="male"> Male 

<input type="radio" name="gender" value="female"> Female<br> 
SInpUL LYGéE "SUbGMILZ 


Tom 


Age : 

O 10-1 
18 - 0 
O 51 - 100 


Ender : 
O Male O Female 


إزسال استعادم 


تلاحظ من المثال السابق أنك تستطيع فقط اختيار عا« أو عاة٣ع۴‏ من القائمة الثانيةء لأنها يمتلكان نفس الإسم ۳۴ه.. 
القانمه 


عند تكوين القائمة نقوم أولا بوضع وسم القائمة أءعاعء ونعين له خاصية ع٩٠۳ه"٣‏ التي ستظهر في النموذج» وبعد ذلك نقوم بوضع عدة وسوم 
option‏ لكل منها خاصية ع۷ااة۷ وعند إرسال البيانات سيتم إرسال المعلومة التي إسمها موجحود في الخاصية ٣3٣۳۴‏ من الوسم أ٤‏ اعء وقيمتها 
موجودة في الخاصية عuاة۷‏ من الوسم ١٥|آأم0‏ الذي تم اختياره. 


<FOrEM aClio0n="echo.Bpl" method="gel> 
<select name="country"> 
<option value="kw">Kuwalilt 
<OPLIONn valle "Sa" >SaUdla 
<option value="ua">Emirates 


ORCIILON Valle Ol OLE 


برامج - ماسنجر ۸8٥۲‏ ووم - العاب 
ج وة سوت - فيديو مضحك - خطوط - ترجمة 


ر عانم آخر من البراهج مواقع - العاب فلاش 
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<OBLIONn value=" bhH"ZBalnraln 
<OPTION value ="om">Oman 
</select> 
SINPUL CyDE ISUCMIL 


CVO 


س ند 


مربع النص متعدد الأسطر 


ويمسى أيضا بالمساحة النصية 16×†3۲۴2» وهو عبارة عن وسم 3۲۴2×ع† مزدوج ( فتح وإغلاق ) وبينهما تضع المحتويات التي تريدها أن تظهر 
داخل المريع» وهو يستخدم غالبا مع النماذج التي ترسل معلوماتها بالطريقة أكهم لأنه يستخدم لإرسال كمية كبيرة من البيانات. 


يمكنك التحكم في عدد الأسطر بالخاصية ۲0۷5 وعدد الأحرف في كل سطر بالخاصية كاه ( عدد الأعمدة ). 


<IOrM acllOnzlechNO.pI. method gel 2z 
<textarea name="message"™" rows="6" cols="50"> 
IhLlS Text WILL appear IlINs1de the box 1 

WOW 
TIS WOKING :) 
</lExXlaréea><br> 
<SInpUL LYVDE SUDMILNS 


CTO 


This Text will appear in3zideE thE box 1 
LSI 
TILES UOTEKIRH TT 


_ | برامج - ماسنجر إعءعمعووم" - العاب 
بج هة سوقت × - فيديو مضحك - خطوط - ترجمة 


عالط خر صن اليراقج مواقع العاب فلاش 
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ع ع 


وسوم mela‏ 
على الرغم من أن اسمها وسوم ةع" إلا أنها ليست أكثر من وسم واحد هو الوسم "ea‏ ! 


يستخدم الوسم "6a‏ لإعطاء المزيد من المعلومات حول الصفحةء مثل وصف الصفحة والكلمات المفتاحية للصفحة وإسم مؤلف الصفحة وإاسم 
البرنامجح المستخدم لتأليف الصفحة وغيرها من المعلومات» وجميع واصفحات هأع" توضع في ترويسة مستند 1۲۷1 أي بين وسمي ل2عم 
وهذا آأمر طيعى لأنها ليست جزءا من المختوى. 


تختلف واصفحات هأ#" عن بعضها البعض بالخاصية ع۳٣‏ أو ۷أاوه-ما!» توجد بعض البرامج تحدد نوع الوسم ٣۴٤3‏ حسب الخاصية عم٣ه"‏ 
وبرامج أخرى حسب الخاصية ۷أا4ع-ما! لذا فمن الأفضل وضع الإثنين. 


الخاصية التانية لوسوم aأ۴٥"‏ هي الخاصية أ١عامء‏ التي تحدد محتوى المعلومة التي حددت اسمها بكل من الخاصيتين 127€ و .http-eqUiV‏ 


الكلمات المفتاحية مثلا إسمها كل۲هسرعk.‏ فإذا كانت الكلمات المفتاحية في موقعك هي (ألعاب برامج صور مقلات دروس دورات)ء فانك 
ستحتاج إلى أن يكون لديك الوسم التالي : 


<meta name="keywords" http-equiv="keywords" 


برامج - ماسنجر ۸8٥۲‏ یوم" - العاب 
- فيديو مضحك - خطو ط - ترجمة 


ع اف اا "يرطع مواقع سے العاب فلاش 


وج د نے سروت 
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e N TT 
لاحظ من الوسم السابق أن الكلمات المفتاحية يفصل كل منها عن الآخر بفاصلة عادية.‎ 
وكما في الطريقة السابقة يتم تحديد معلومات الصفحة بنفس الطريقة» وتأخد الخاصية ع۳" أو ۷أuاوع-ماط أحد القيم التالية:‎ 


ه٠‏ dsاoسkey‏ : لتعيين الكلمات المفتاحية للمستند مفصولة بفواصل» ومرتبة حسب أهميتها ولا يجوز التكرار. 

onاiptاdesc‏ : لوضع وصف بسيط للصفحة ويفضل أن لا يتعدى العشرون كلمة. 

٠‏ اatoاerصمenو‏ : إسم البرنامج الذي استخدم لإنشاء الصفحة. 

author ٠‏ : إسم مؤلف الصفحة. 

٠‏ ypeاt-content‏ : لتحديد نسق البيانات وصفحة المحارف المستخدمة. لصفحات ا115 العربية المكتوبة في الويندوز ضع الوسم 
كالتالي : 

E E TT E OCD 0 E TC © 


COL ERMIL| Tle TINIIL, CIMLE WIMIOWS lO © 


هه اhtواcopy‏ : معلومات عن حقوق طبع الصفحة. 
تعریب الد ذا 
تتلخص إجراءات التعريب في جزئين رئيسيين. أولا إظهار الخطوط بصورة سليمة» وثانيا إظهار الإتجاه بشكل سليم. 


لإظهار الخطوط العربية بشكل شسليم يجب التأكد من استخدام صفحات المحارف العربية المنتشرة حاليا وهي ۸00۷5-1256 إذا كنت تكتب 
صفحاتك في ء0«۷ل٣ ۷i‏ فهذه هي صفحة المحارف القياسيةء ما عدا 2000 sسهل"W‏ فهو يستخدم صفحة المحارف العالمية الموحدة 
nicodeل.‏ وأما إذا كنت تكتب صفحاتك في بيئة ×۷ا"أا) ×أ٣لا‏ مثلا) فإن ذلك يعتمد على البرنامجح الذي تستخدمه لتعريب النظام 


وفي جميع الأحوال السابقة فانك تحتاج لضبط الوسم اع" الخاص بنوع المحتوى عم۷-أ٣عاهء‏ عند قيمة مناسبة. 


أما تفيير اتجاه الصفحات فيتم بعدة طرق أول طريقة هي استخدام الوسم م وضبط الخاصية واج له عند القيمة وأا وهي طريقة بسيطة 
ونافعة» ولكنها تصبح متعبة في المواقع الكبيرة وعندما تريد عمل الكثير من الجداول والتنسيقات. أما الطريقة الثانية وهي الطريقة الأفضل 
فهي استخدام الخاصية ١أ‏ في الوسم ا۳٣‏ وضبطه عند القيمة ا۲ء يقوم ذلك بجعل الصفحة تتجه كليا من اليمين إلى اليساں بحيث تصبح 
الفقرات تتجه من اليمين إلى اليسارء والعناوين تتجه من اليمين إلى اليسار وتصبح الخلية الأولى في الجدول هي الخلية الأولى على 
اليمين» وهذه الميزة متوفرة تلقائيا فقي متصفح ١۲٤10۲م×٤‏ اعمماعtم]‏ وهي غير متوفرة في N3۷1920۲‏ eصمNetsca.‏ ولكن عند تركيب »Sindbad‏ 
فإن هذه الميزة تظهر في صورة زر في على شريط العنوان حيث يحدد المستخدم الإتجاه الذي يريده يدويا ولا تؤثر الخاصية ١أ‏ على الصفحة 
تلقائيا. 


e O E 
HTML cl) le 


الآن وقد انتهيت من تعلم لغة 1۲١۷1‏ فلا يسعنا أن نقول أنك انتهيت من تعلم مهنة تطوير الويب و”أمهام۷ه0 طع. فلا زال أمامك الكثير 
لتتعلمه حتى تصل إلى المستوى الإحترافي الذي نطالب به جميع العرب» فتقنيات الويب تتجدد باستمرار ويصبح اللحاق بها كلها أمرا مستحيلا 
على الضعفاءء أما الأقوياء فهم على الطريق بثبات وبعزمهم وإصرارهم أصبحوا روادا في عالم الكمبيوتر والإنترنت الرائع» بقي علينا أن نعلمك 


برامج - ماسنجر ٥۲‏ ۸8 ووم" - العاب 
فيديو مضحك اق - خطوط - ترجمة 


ع اف لان "يرطع مواقع سے العاب فلاش 


وج د نے سروت 


http://www.sh3bwah.com/ 
تعض هدو لقانت وك الخوول قلى المزيد من المعلومات عتهو: وخدك رانا منوا كي جهسة هة النقعات فى كوران فة أن ها‎ 
الله لنؤدي دورنا إلى جميع العرب.‎ 


أوراق الأنماط المتتالية 


أوراق الأنماط المتتالية أو معطS‏ عارSt‏ وadinعCass‏ أو CSS‏ هي تقنية تستخدم للتحكم في الكيفية التي يجب أن تظهر بها الوسوم في صفحة 
ويب» فمتلا العنوان الرئيسي 1۳1 يظهر باللون الأسود وبخط عادي وطريقة عادية» ولتغییره کان لا بد من وضع وسم ۴۵٣٤‏ داخل كل وسم 11ء 
فماذا لو استطعنا أن نحدد نحن كيف نريد لعنوان الصفحة الرئيسي أن يظهر وكيف يجب أن تظهر الجداول وكيف يجب أن تظهر جحميع الوسوم 
الأخرى في لغة ا1۲۷1 الآن يمكننا عمل ذلك باستخدام تقنية 55ء وقد تم تطوير هذه التقنية على المدى الأعوام السابقة حتى وصلنا إلى 
النسخة الثانية من مواصفات هذه اللغة ويمكن الحصول عليها من مجمع الشبكة العنكبوتية العالمية مع مجموعة كبيرة من الوصلات والكتب 
والدورات : /http://www.w3.org/Style/CSS‏ 


لغة الترميز القابلة للتوسع 


لغة الترميز القابلة للتوسع أو ع29 uووaا Markup‏ عاeXtensib‏ أو اXM×‏ هي عبارة عن تقنية جديدة بحيث يتم التخلص من الوسوم القياسية 
ويصبخ لكل شخص وسومه الخاصة به» قبد أن ظهرت تقنية 5595© أصبح ا الوسوم غير مهما فيمكنني متلا آن أقوم بجعل الوسم ۸6 الذي لا 
أستخدمه كثيرا يصضجح وسهاآخاصا له لون خاص وشكل خاص أستخدمه في كتابة الملاحظات متلا بحيث يصبح لونها أحمرا وتكون مبروزة ببرواز 
جميل ولافته للنظرء وهكذا أصبح الإسم ۸6 لا يشير إلى شيءء فما الفائدة منه الآن ! 


لذا فقدرظةرت فكرة لغة الترميز القابلة اللتوسع إبخيت أنتك تقوم تعمل الوسوم وتسميها أي استة تريده» وتحدد كيفية ظهوؤر المحتوى الذي 
بداخل الوسم عن طريق أوراق الأنماط المتتاليةء إللمريد عن 51× إذهب إلى قسم ۷1× في مجم إلويب : |http://www.w3.0rg/XML‏ 


لغة الجافا سكريبت هي عبارة عن لغة برمجة محدودة. مخصصة للعمل في صفحات ويب لتوفير صفحات متغيرة ( ديناميكية ): فيمكنك عمل زر 
ينفذ عمليات خاصة على جهاز الزبون دون إرسال المعلومات إلى مزود ويب» وتستخدم بشكل كبير في الصفحات الشخصية في عمل الحركات 
والتأثيرات الفنية والحركية وقد ظهرت أخيرا العديد من المواقع التي توفر سكريبتات جاهزة ورائعة لتقوم بنقلها وإضافتها إلى موقعك بسهولة 
للمزيد من المعلومات عن لفة الجافا سکریبت اذهب إلى موëتg‏ : /http://javascript.internet.c0m‏ İو‏ موړgã‏ 
./http://www.dynamicdrive.com‏ 


البرمجة جهة المزود 


ل ق ا کی اا ی کا کا ات می ھا الو اعات رآ 
البوابات الشائعة أو Gateway 1te face‏ onرmmصo‏ أو »C61‏ ويمكن كتابة البرامج بأي لغة من لغات البرمجة بشرط أن يعمل البرنامج حسب 
مواصفات 061» ولكن أشهر لغات البرمجة استخداما هي لغة ۴6۲1 وهي تتميز باحتواءها على العديد من الميزات ووظائف معالجة النصوص المطلوبة 
في عمليات إنشاء الصفحات ديناميكياء وهي لغة عامة وليست لغة مخصصة لكتابة برامج C61‏ فقط على العكس من لغة ۴1۲ الجديدة وهي لغة 
مخصصة كليا لعمل الصفحات الديناميكية وهي اللغة المستخدمة لجعل موقع مبرمج يظهر بمظهره الموحد والمتناسق والمترابطء وتوجد أيضا لغة ۸8۲ 
من مايكروسوفت أيضا ولكنها مقصورة على مزودات N1‏ فقط ولا تعمل في مزودات N1×‏ ل الأوسع انتشاراء للمزيد من المعلومات حول ۴۲1 راجع : 
/http://www.perl.com‏ ولمعلومات حول lغة http://www.php.net gجlر PIP‏ 


